<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
    margin: 0;
    padding: 0;
    list-style: none;
}
.wrap{
    width: 500px;
    border: 1px solid #999;
    margin: 30px auto 0;
    padding: 20px;
}
.title{
    margin-bottom: 15px;
}
.title label{
    font-size: 18px;
    color: #333;
    line-height: 50px;
}
.title .ipt_tit{
    font-size: 18px;
    color: #333;
    padding: 5px 8px;
    width: 421px;
}
.content{
    margin-bottom: 15px;
}
.content label{
    font-size: 18px;
    color: #333;
    line-height: 50px;
}
.content .ipt_con{
    font-size: 18px;
    color: #333;
    width: 421px;
    height: 100px;
    padding: 5px 8px;
}
.send{
    font-size: 20px;
    color: #333;
    padding: 2px 10px;
}
.wrap h2{
    font-size: 24px;
    margin: 15px 0;
}
.list li{
    margin-bottom: 10px;
    position: relative;
}
.list li h3{
    font-size: 20px;
    background-color: #ccc;
    padding: 5px 10px;
}
.list li p{
    font-size: 18px;
    background-color: #eee;
    padding: 5px 10px;
}
.list li span{
    position: absolute;
    right: 10px;
    top: 5px;
    color: red;
    cursor: pointer;
}
</style>
</head>
<body>
    
<div class="wrap">
    <div class="title">
        <label for="">标题：</label>
        <input type="text" class="ipt_tit" placeholder="请输入标题">
    </div>
    <div class="content">
        <label for="">内容：</label>
        <textarea class="ipt_con"></textarea>
    </div>
    <button class="send">发布</button>
    <h2>显示内容</h2>
    <ul class="list">
        <!-- <li>
            <h3>标题11</h3>
            <p>内容11，时间就开了房间就工行借记卡归还借款，就工行借记卡归还借款就工行借记卡归还借款</p>
            <span>X</span>
        </li>
        <li>
            <h3>标题22</h3>
            <p>内容22，时间就开了房间就工行借记卡归还借款</p>
            <span>X</span>
        </li> -->
    </ul>
</div>

<script src="./utils.js"></script>
<script>
/* // 获取元素
var ipt_tit = $('.ipt_tit');
var ipt_con = $('.ipt_con');
var send = $('.send');
var list = $('.list');

// 不能在这里获取输入的值，因为这里执行时，用户还没输入内容
// var tit_Val = ipt_tit.value;// ''
// var con_Val = ipt_con.value;// ''

// 给 发布 添加点击事件
send.onclick = function (){
    // 获取输入的标题和内容
    var tit_Val = ipt_tit.value;
    var con_Val = ipt_con.value;
    // 空值判断
    // if (tit_Val === '' || con_Val === '') {
    if (!tit_Val || !con_Val) {
        alert('亲，输入内容不能为空！');
        return;// 结束函数执行
    }
    // 创建一个li
    var newLi = document.createElement('li');
    // 添加li内部的结构
    newLi.innerHTML = '<h3>'+tit_Val+'</h3>'+
                      '<p>'+con_Val+'</p>'+
                      '<span>X</span>'
    // 将newLi添加到list中
    list.appendChild(newLi);
    // 清空输入框的值
    ipt_tit.value = '';
    ipt_con.value = '';

    // 给newLi中的span添加点击事件
    newLi.lastElementChild.onclick = function (){
        // 删除span所在的li
        newLi.remove();
        // list.removeChild(newLi);
    }
} */


// 事件委托实现：
var wrap = $('.wrap');
wrap.onclick = function (e){
    // 判断点击 发布 按钮
    if (e.target.className === 'send') {
        // 缓存输入的值
        var tit_Val = $('.ipt_tit').value;
        var con_Val = $('.ipt_con').value;
        // 判断空值
        if (!tit_Val || !con_Val) {
            alert('输入内容不能为空！');
            return;
        }
        // 创建li
        var newLi = document.createElement('li');
        // 给li添加内容
        newLi.innerHTML = '<h3>'+tit_Val+'</h3>'+
                          '<p>'+con_Val+'</p>'+
                          '<span>X</span>'
        // 添加到list中
        $('.list').appendChild(newLi);

        // 清空输入框
        $('.ipt_tit').value = '';
        $('.ipt_con').value = '';
    }

    // 判断点击 x 按钮
    if (e.target.tagName === 'SPAN') {
        e.target.parentNode.remove();
    }
}

</script>
</body>
</html>